<script lang="ts" setup>
import ProductBox from "../Common/ProductBox.vue";
import { reactive, ref } from "vue";
const value = ref<number>(1);
// do not use same name with ref
const form1 = reactive({
  name: "",
  code: "",
  region: "",
  bank: "",
  subBank: "",
  bankAcc: "",
  address: "",
});

const form2 = reactive({
  name: "",
  id: "",
  idType: "",
});

const onSubmit = () => {
  console.log("submit!");
};

import { Plus } from "@element-plus/icons-vue";

import type { UploadProps } from "element-plus";

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (_, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};
</script>
<template>
  <div class="pr-5 pl-5">
    <ProductBox title="实名认证">
      <template #default>
        <div class="flex justify-center mb-20">
          <el-steps style="width: 1200px" :active="0" align-center>
            <el-step title="步骤 1" description="填写认证信息" />
            <el-step title="步骤 2" description="信息审核" />
            <el-step title="步骤 3" description="认证完成" />
          </el-steps>
        </div>
        <div class="flex flex-col items-center justify-center">
          <a-radio-group v-model:value="value" class="mb-5">
            <a-radio :value="1">个人实名认证</a-radio>
            <a-radio :value="2">企业实名认证</a-radio>
            <a-radio :value="3">个体工商户</a-radio>
          </a-radio-group>
          <el-form :model="form1" label-width="auto" style="max-width: 600px" v-if="value === 2">
            <el-form-item label="企业名称">
              <el-input v-model="form1.name" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="统一社会信用代码">
              <el-input v-model="form1.code" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="营业执照扫描件">
              <a-button class="w-20 h-20 p-0 m-0">
                <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false" :on-success="handleAvatarSuccess">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </a-button>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input v-model="form1.bank" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="开户支行">
              <el-input v-model="form1.subBank" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input v-model="form1.bankAcc" class="md:w-100 w-50" />
            </el-form-item>

            <el-form-item label="公司地址">
              <el-input v-model="form1.address" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="选择支行">
              <el-select v-model="form1.region" placeholder="请选择支行">
                <el-option label="地区A" value="shanghai" />
                <el-option label="地区B" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="flex w-full justify-center">
                <el-button type="primary" @click="onSubmit">提交审核</el-button>
                <el-button>取消</el-button>
              </div>
            </el-form-item>
          </el-form>
          <el-form :model="form2" label-width="auto" style="max-width: 600px" class="w-full" v-else-if="value === 1">
            <el-form-item label="证件类型">
              <el-select v-model="form2.idType" placeholder="请选择证件类型">
                <el-option label="身份证" value="shanghai" />
                <el-option label="驾照" value="11111" />
                <el-option label="护照" value="22222" />
              </el-select>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="form2.name" class="w-100" />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form2.id" class="w-100" />
            </el-form-item>
            <el-form-item label="身份证扫描件">
              <a-button class="w-20 h-20 p-0 m-0">
                <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false" :on-success="handleAvatarSuccess">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </a-button>
            </el-form-item>

            <el-form-item>
              <div class="flex w-full justify-center">
                <el-button type="primary" @click="onSubmit">提交审核</el-button>
                <el-button>取消</el-button>
              </div>
            </el-form-item>
          </el-form>

          <el-form :model="form1" label-width="auto" style="max-width: 600px" v-else-if="value === 3">
            <el-form-item label="姓名">
              <el-input v-model="form1.name" class="md:w-100 w-50" />
            </el-form-item>
            <!-- <el-form-item label="统一社会信用代码">
              <el-input v-model="form1.code" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="营业执照扫描件">
              <a-button class="w-20 h-20 p-0 m-0">
                <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false" :on-success="handleAvatarSuccess">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </a-button>
            </el-form-item> -->
            <el-form-item label="开户银行">
              <el-input v-model="form1.bank" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="开户支行">
              <el-input v-model="form1.subBank" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input v-model="form1.bankAcc" class="md:w-100 w-50" />
            </el-form-item>

            <el-form-item label="居住地址">
              <el-input v-model="form1.address" class="md:w-100 w-50" />
            </el-form-item>
            <el-form-item label="选择支行">
              <el-select v-model="form1.region" placeholder="请选择支行">
                <el-option label="地区A" value="shanghai" />
                <el-option label="地区B" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="flex w-full justify-center">
                <el-button type="primary" @click="onSubmit">提交审核</el-button>
                <el-button>取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </ProductBox>
  </div>
</template>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  text-align: center;
}
</style>
